<template>
    <h5>主导航目录</h5>
    <ul class="menus">
        <li>
            <RouterLink to="/default"> 默认页面 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> 单文件组件 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> 文件模块 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> 工程错误和图片资源 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> 样式处理 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> 打包操作 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> ajax的集成和使用 </RouterLink>
        </li>
        <li>
            <RouterLink to="/default"> ElementUI使用 </RouterLink>
        </li>
    </ul>
    <hr>
    <h3>路由模块</h3>
    <pre class="note">
        vue路由模块vue-router是基于动态组件(component)技术，以及对浏览器导航控制方法的封装，实现的页面组件切换功能；
        路由模块的集成:
            1. 创建项目时直接选择对应的路由模块集成
            2. 手动完成路由模块集成
                + 路由功能依赖于模块 vue-router , 安装路由插件 npm install vue-router -S
                + 在当前项目的src 目录下创建 router/index.js 文件
                    <img src="@/assets/error/38.png" alt="" srcset="">
                + 在main.js 文件中导入并装载路由功能
                    <img src="@/assets/error/39.png" alt="" srcset="">
                + 路由对象在main.js通过 use 方法完成安装时会自动集成如下功能
                    - app.component('RouterLink', RouterLink);
                    - app.component('RouterView', RouterView);
        路由表的定义：
            1. 提供routes配置属性的数组取值
            2. 在数组中以{}组成导航组件元素配置，实现地址和组件的一一对应关系
                <img src="@/assets/error/40.png" alt="" srcset="">
        路由模块的使用:
            1. 在对应的组件页面中使用组件 RouterView 定义导航变化时，对应的路由组件显示的位置（类似component）
            2. 在需要导航切换的页面中使用 RouterLink 定义导航切换按钮，实现路由组件导航的切换操作
                <img src="@/assets/error/41.png" alt="" srcset="">
        </pre>
    <ul>
        <li>
            <RouterLink to="/route/link">RouterLink的使用</RouterLink>
        </li>
        <li>
            <RouterLink to="/route/path">路由嵌套&路由地址&路由懒加载</RouterLink>
        </li>
        <li>
            <RouterLink to="/route/model">路由模式</RouterLink>
        </li>
        <li>
            <RouterLink to="/route/route">路由激活信息</RouterLink>
        </li>
        <li>
            <RouterLink to="/route/query">
                query查询参数[to="/route/query"]
            </RouterLink>
        </li>
        <li>
            <RouterLink to="/route/query?username=admin&password=123456">
                query查询参数[to="/route/query?username=admin&password=123456"]
            </RouterLink>
        </li>
        <li>
            <RouterLink to="/route/query?username=tom&password=0000">
                query查询参数[to="/route/query?username=tom&password=0000"]
            </RouterLink>
        </li>
        <li>
            <RouterLink to="/route/rest">
                REST查询参数[to="/route/rest"]
            </RouterLink>
        </li>
        <li>
            <RouterLink to="/route/rest/admin/123456">
                REST查询参数[to="/route/rest/admin/123456"]
            </RouterLink>
        </li>
        <li>
            <RouterLink to="/route/rest/tom/0000">
                REST查询参数[to="/route/rest/tom/0000"]
            </RouterLink>
        </li>
    </ul>
    <hr>
    <p>动态请求参数</p>
    <input v-model="username" type="text" placeholder="username" />
    <input v-model="password" type="text" placeholder="password" />
    <ul>
        <li>
            <RouterLink :to="'/route/query?username=' + username + '&password=' + password">
                query查询参数[:to=" '/route/query?username='+username+'&password='+password "]
            </RouterLink>
        </li>
        <li>
            <RouterLink :to="`/route/query?username=${username}&password=${password}`">
                query查询参数[:to=" `/route/query?username=${ username }&password=${ password }` "]
            </RouterLink>
        </li>
        <li>
            <RouterLink :to="{
                path: '/route/query',
                query: {
                    username: username,
                    password
                }
            }">
                query查询参数[:to="{ path:'/route/query',query:{ username:username,password } }"]
            </RouterLink>
        </li>
        <li>
            <RouterLink :to="{
                name: 'query',
                query: {
                    username,
                    password
                }
            }">
                query查询参数[:to="{ name:'query',query:{ username:username,password } }"]
            </RouterLink>
        </li>
        <li>
            <RouterLink :to=" '/route/rest/'+username+'/'+password ">
                REST查询参数[:to=" '/route/rest/'+username+'/'+password "]
            </RouterLink>
        </li>
        <li>
            <RouterLink :to=" `/route/rest/${ username }/${ password }` ">
                REST查询参数[:to=" `/route/rest/${ username }/${ password }` "]
            </RouterLink>
        </li>
        <!-- <li>
            <RouterLink :to=" { path:'/route/reset',params:{ username,password } } ">
                REST查询参数[:to=" `/route/rest/${ username }/${ password }` "]
            </RouterLink>
        </li> -->
        <li>
            <RouterLink :to=" { name:'rest',params:{ username:username,password } } ">
                REST查询参数[:to=" { name:'rest',params:{ username,password } } "]
            </RouterLink>
        </li>
    </ul>
    <hr>
    <p>编程式导航</p>
    <input type="text" v-model="test">
    <input type="button" value="判断跳转页面" @click="gotoTest()">
    <br>
    <input type="button" value="历史记录的前进操作" @click="$router.go(1)">
    <hr>
    <p>路由缓存和守卫</p>
    <ul>
        <li>
            <RouterLink :to=" { name:'live',query:{ arg:'11111' } } ">
                RouterAliveView[:to=" { name:'live',query:{ arg:'11111' } } "]
            </RouterLink>
        </li>
        <li>
            <RouterLink :to=" { name:'live',query:{ arg:'22222' } } ">
                RouterAliveView[:to=" { name:'live',query:{ arg:'22222' } } "]
            </RouterLink>
        </li>
    </ul>
    <hr>
    <RouterView></RouterView>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
    data() {
        return {
            username: "",
            password: "",
            test:""
        }
    },
    methods: {
        gotoTest() {
            if(this.test==""){
                ElMessage.error("请先完成test输入")
            }else{
                // 切换新路由地址
                // this.$router.push(to)
                //      to 取值等同于 RouterLink 的to属性
                // this.$router.push("/route/test?test="+this.test)
                // this.$router.push({
                //     path:"/route/test",
                //     query:{
                //         test:this.test
                //     }
                // })
                // this.$router.push({
                //     name:"test",
                //     query:{
                //         test:this.test
                //     }
                // })
                this.$router.replace({
                    name:"test",
                    query:{
                        test:this.test
                    }
                })
            }
        }
    },
}
</script>

<style lang="scss" scoped></style>